<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>The Ajax 01 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxUpdate()">Do Ajax Update</button>
    <div id="result"></div>


    <script>
        function doAjaxGet() {
            // debugger;
            //1.创建XHR对象（XMLHttpRequest）---Ajax应用的入口对象
            let xhr = new XMLHttpRequest();
            //2.在XHR上注册监听状态（拿到服务端响应结果以后更新到页面result位置）
            xhr.onreadystatechange=function () {//事件处理函数（客户端与服务端通讯函数）
                if (xhr.readyState==4&&xhr.status==200){//readyState==4表示服务端响应到客户端数据以接收完成
                    //status==200表示请求处理过程没有问题
                    // console.log(xhr.responseText);
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
            //3.与服务端建立连接（定义请求方式，请求url，异步）
            xhr.open("GET","http://localhost:8080/doAjaxGet",true);
            //4.向服务端发送请求
            xhr.send(null);//get请求send方法内部不传数据或者写一个null
            console.log("===main thread===")//假如是异步客户端执行完send会继续向下执行
        }
    </script>

    <script>
        function doAjaxPost() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4&&xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
            xhr.open("POST","http://localhost:8080/doAjaxPost",true);
            //post请求向服务端传递数据，需要设置请求头，必须在open之后
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send("id=101&name=Book&remark=Book...");
        }
    </script>

    <script>
        function doAjaxDelete() {
            let xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if (xhr.readyState==4&&xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
            xhr.open("delete","http://localhost:8080/doAjaxDelete?id=101",true);
            xhr.send(null);
        }
    </script>
    <script>
        function doAjaxUpdate(){
            // debugger;
            let xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        document.getElementById("result").innerHTML=xhr.responseText;
                    }
                }
            }
            xhr.open("put","http://localhost/doAjaxUpdate",true);
            //post请求向服务端传递数据,需要设置请求头,必须在open之后
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //发送请求(post请求传递数据,需要将数据写入到send方法内部)
            xhr.send("id=101&name=千里之行&remark=始于足下...");
        }
    </script>
</body>
</html>